<!--
 * @Author: huangximian huangximian@e-ling.com.cn
 * @Date: 2022-05-27 11:39:05
 * @LastEditors: huangximian huangximian@e-ling.com.cn
 * @LastEditTime: 2022-06-06 10:34:43
 * @FilePath: \jcyy-official-website\src\views\android\pages\homePage\homePageindex.vue
 * @Description: 这是默认设置,请设置`customMade`, 打开koroFileHeader查看配置 进行设置: https://github.com/OBKoro1/koro1FileHeader/wiki/%E9%85%8D%E7%BD%AE
-->
<template>
  <div>
    <div class="home_img">
      <img src="../../../../assets/images/u58.png" alt="" />
    </div>
    <div class="content_android" @click="boolerform = false">
      <div>
        <video-player
          class="video-player vjs-custom-skin"
          ref="videoPlayer"
          :playsinline="true"
          :options="playerOptions"
        ></video-player>
      </div>

      <!--  -->
      <div class="content_android_jinchuncharacteristic">
        <div class="content_android_a">
          <p>产业布局</p>
          <p>INDUSTRIAL LAYOUT</p>
          <div class="location_cioe_a"></div>
          <div class="location_cioe_b"></div>
        </div>

        <div class="content_android_b">
          <div>
            <img src="../../../../assets/images/u58.png" alt="" />
          </div>
          <div>
            <div>
              <h1>槿椿颐养中心</h1>
              <p>
                成立于2016年7月，是经济南市历下区人民政府批准成立的国有平台公司。紧紧围绕明府城保护开发、中央商务区招商建设“两大主战场”，全面推进招商引资、项目建设......
              </p>
            </div>
          </div>
        </div>
        <div class="content_android_b">
          <div>
            <img src="../../../../assets/images/u58.png" alt="" />
          </div>
          <div>
            <div>
              <h1>槿椿颐养中心</h1>
              <p>
                成立于2016年7月，是经济南市历下区人民政府批准成立的国有平台公司。紧紧围绕明府城保护开发、中央商务区招商建设“两大主战场”，全面推进招商引资、项目建设......
              </p>
            </div>
          </div>
        </div>
      </div>

      <div class="content_android_jinchuncharacteristic">
        <div class="content_android_a">
          <p>槿椿特色</p>
          <p>JIN’CHUN CHARACTERISTIC</p>
          <div class="location_cioe_a"></div>
          <div class="location_cioe_b"></div>
        </div>

        <div class="CHARACTERISTIC_b">
          <div class="CHARACTERISTIC">
            <div class="content_android_CHARACTERISTIC">
              <img src="../../../../assets/icon/icon_c.png" alt="" />
              <p>医养体系</p>
              <p>Medical system</p>
            </div>
            <div class="content_android_CHARACTERISTIC">
              <img src="../../../../assets/icon/icon_c.png" alt="" />
              <p>医养体系</p>
              <p>Medical system</p>
            </div>
            <div class="content_android_CHARACTERISTIC">
              <img src="../../../../assets/icon/icon_c.png" alt="" />
              <p>医养体系</p>
              <p>Medical system</p>
            </div>
            <div class="content_android_CHARACTERISTIC">
              <img src="../../../../assets/icon/icon_c.png" alt="" />
              <p>医养体系</p>
              <p>Medical system</p>
            </div>
            <div class="content_android_CHARACTERISTIC">
              <img src="../../../../assets/icon/icon_c.png" alt="" />
              <p>医养体系</p>
              <p>Medical system</p>
            </div>
            <div class="content_android_CHARACTERISTIC">
              <img src="../../../../assets/icon/icon_c.png" alt="" />
              <p>医养体系</p>
              <p>Medical system</p>
            </div>
          </div>
        </div>
      </div>

      <div class="content_android_jinchuncharacteristic">
        <div class="content_android_a">
          <p>槿椿资讯</p>
          <p>JIN’CHUN NEWS</p>
          <div class="location_cioe_a"></div>
          <div class="location_cioe_b"></div>
        </div>

        <div class="tab_news">
          <div class="tba_border">
            <div
              @click="switchtab(item.id)"
              v-for="item in tablist"
              :key="item.id"
              :class="item.boole ? 'tab_cufa' : ''"
            >
              {{ item.name }}
            </div>
          </div>
        </div>

        <div class="tab_concent">
          <div class="tab_concent_top">
            <div><img src="../../../../assets/images/u100.png" alt="" /></div>
            <div class="tab_concent_text">
              <p>
                近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云近年来，为响应国家号召，各种养老公寓、养老农庄如雨后春芛层出不穷。如何提升长者在居家养老方面的质量，云
              </p>
              <p>2022-03-09</p>
            </div>
          </div>
        </div>

        <div class="tab_comcent_tow">
          <div class="tab_coent_tow_top">
            <img src="../../../../assets/images/u100.png" alt="" />
            <div class="tab_coent_tow_text">
              <p>把全社会对老年人的关爱落到实处，让老年群众......</p>
              <p>2022-03-08</p>
            </div>
          </div>
          <div class="tab_coent_tow_top">
            <img src="../../../../assets/images/u100.png" alt="" />
            <div class="tab_coent_tow_text">
              <p>把全社会对老年人的关爱落到实处，让老年群众......</p>
              <p>2022-03-08</p>
            </div>
          </div>
        </div>
      </div>

      <div class="seemore">查看更多</div>
    </div>

    <!-- 入住体验 -->
    <div class="CheckinExperience" @click="boolerform = true">入住体验</div>

    <div
      class="CheckinExperience_form"
      :style="
        boolerform
          ? 'transform: translate(0, 0rem);'
          : 'transform: translate(0, 33rem);'
      "
    >
      <div class="CheckinExperience_title">
        <div @click="boolerform = false">关闭</div>
        <div style="font-size: 1.7rem; margin-left: 4rem">入住体验</div>
        <div class="butten" @click="submitForm('formInline')">提交</div>
      </div>
      <div class="CheckinExperience_middle">
        <!-- <van-form @submit="onSubmit">
          <van-field
            v-model="formInline.cellphonenumber"
            required
            placeholder="请输入手机号"
            :rules="[{ required: true, message: '请填写密码' }]"
          />
          <div class="search_top">
            <div class="search">
              <van-field
                v-model="formInline.cellphonenumber"
                required
                placeholder="请输入手机号"
                :rules="[{ required: true, message: '请填写密码' }]"
              />
            </div>
            <div class="search">
              <select v-model="formInline.lei">
                <option value="槿椿颐养中心">槿椿颐养中心</option>
                <option value="1">1</option>
                <option value="1">1</option>
              </select>
            </div>
          </div>

          <div class="search_butten">
            <div class="search_Verificationcode">
              <van-field
                v-model="formInline.VerificationCode"
                required
                placeholder="输入短信验证码"
                :rules="[{ required: true, message: '输入短信验证码' }]"
              />
              <button type="button" @click="countDown" ref="verification ">
                {{ btnMsg || countNum }}
              </button>
            </div>
          </div>
          <div>
            <div class="search_mobile">
              <van-field
                v-model="formInline.fullname"
                placeholder="输入短信验证码"
              />
            </div>
          </div>
        </van-form> -->
        <el-form
          :inline="true"
          :model="formInline"
          :rules="rules"
          ref="formInline"
          class="demo-form-inline"
        >
          <div class="search_top">
            <div class="search">
              <el-form-item prop="fullname">
                <input v-model="formInline.fullname" placeholder="姓名" />
              </el-form-item>
            </div>
            <div class="search">
              <el-form-item prop="cellphonenumber">
                <el-select
                  v-model="formInline.cellphonenumber"
                  placeholder="请选择活动区域"
                >
                  <el-option label="槿椿颐养中心" value="shanghai"></el-option>
                  <el-option label="槿椿颐养中心" value="beijing"></el-option>
                </el-select>
              </el-form-item>
            </div>
          </div>
          <div>
            <div class="search_mobile">
              <el-form-item prop="cellphonenumber">
                <input
                  v-model="formInline.cellphonenumber"
                  placeholder="手机号"
                />
              </el-form-item>
            </div>
          </div>
          <div class="search_butten">
            <div class="search_Verificationcode">
              <el-form-item prop="VerificationCode">
                <input
                  v-model="formInline.VerificationCode"
                  placeholder="输入短信验证码"
                />
              </el-form-item>
              <button type="button" @click="countDown" ref="verification ">
                {{ btnMsg || countNum }}
              </button>
            </div>
          </div>
          <div>
            <div class="search_mobile">
              <input v-model="formInline.fullname" placeholder="备注(非必填)" />
            </div>
          </div>
        </el-form>
      </div>
      <div class="CheckinExperience_button"></div>
    </div>
  </div>
</template>
<script>
import Footer from "../../compents/Footer/inedx.vue";
export default {
  data() {
    return {
      boolerform: false,
      playerOptions: {
        playbackRates: [0.5, 1.0, 1.5, 2.0], //可选择的播放速度
        autoplay: false, //如果true,浏览器准备好时开始回放。
        muted: false, // 默认情况下将会消除任何音频。
        loop: false, // 视频一结束就重新开始。
        preload: "auto", // 建议浏览器在<video>加载元素后是否应该开始下载视频数据。auto浏览器选择最佳行为,立即开始加载视频（如果浏览器支持）
        language: "zh-CN",
        aspectRatio: "16:9", // 将播放器置于流畅模式，并在计算播放器的动态大小时使用该值。值应该代表一个比例 - 用冒号分隔的两个数字（例如"16:9"或"4:3"）
        fluid: true, // 当true时，Video.js player将拥有流体大小。换句话说，它将按比例缩放以适应其容器。
        sources: [
          {
            // type: "",
            src: "https://dvod.300hu.com/vod/product/c52cd9aa-a7fc-40f8-b708-9cbe8b5e5cbd/c94ac2808e0549feb3c6fd33c2d468e5.mp4", //url地址
          },
        ],
        poster: "", //你的封面地址
        notSupportedMessage: "此视频暂无法播放，请稍后再试", //允许覆盖Video.js无法播放媒体源时显示的默认信息。
        controlBar: {
          timeDivider: true, //当前时间和持续时间的分隔符
          durationDisplay: true, //显示持续时间
          remainingTimeDisplay: false, //是否显示剩余时间功能
          fullscreenToggle: true, //全屏按钮
        },
      },
      rules: {
        fullname: [
          { required: true, message: "请输入您的姓名", trigger: "blur" },
        ],
        cellphonenumber: [
          { required: true, message: "请输入手机号", trigger: "blur" },
          {
            pattern: /^((0\d{2,3}-\d{7,8})|(1[3584]\d{9}))$/,
            message: "请输入正确的手机号码或者座机号",
          },
        ],
        name: [{ required: true, message: "请输入", trigger: "blur" }],
        VerificationCode: [
          { required: true, message: "请输入验证码", trigger: "blur" },
        ],
        personal: [{ required: true, message: "请输入", trigger: "blur" }],
      },
      formInline: {
        required: "",
        cellphonenumber: "",
        VerificationCode: "",
        fullname: "",
        lei: "槿椿颐养中心",
      },
      tablist: [
        {
          name: "最新资讯",
          id: 1,
          boole: true,
        },
        {
          name: "行业动态",
          id: 2,
          boole: false,
        },
        {
          name: "视频槿椿",
          id: 3,
          boole: false,
        },
        {
          name: "长者风采",
          id: 4,
          boole: false,
        },
      ],
      // 倒计时周期
      countNum: 60,
      // 用于倒计时标记，true-正在倒计时
      countFlag: false,
      btnMsg: "获取验证码",
    };
  },
  components: {
    Footer,
  },
  methods: {
    submitForm(formName) {
      this.$refs[formName].validate((valid) => {
        console.log(valid);
        if (valid) {
          // alert("submit!");
        } else {
          console.log("error submit!!");
          return false;
        }
      });
    },
    switchtab(e) {
      for (const a of this.tablist) {
        if (a.id === e) {
          a.boole = true;
        } else {
          a.boole = false;
        }
      }
    },
    // 发送倒计时
    countDown() {
      this.countFlag = !this.countFlag;
      if (this.btnMsg) {
        this.btnMsg = null;
        this.intervalBtn = setInterval(() => {
          if (this.countNum <= 0) {
            this.btnMsg = "获取验证码";
            clearInterval(this.intervalBtn);
            this.countFlag = !this.countFlag;
            this.countNum = 60;
          }
          // 倒计时
          this.countNum--;
        }, 1000);
      } else {
        // alert("请勿重复操作");
      }
    },
  },
};
</script>
<style scoped>
.home_img {
  width: 100%;
  height: 15rem;
}
.home_img img {
  width: 100%;
  height: 100%;
}
.content_android {
  margin: 1.2rem 1.5rem 2rem 1.5rem;
}
.content_android_jinchuncharacteristic {
  margin-top: 4rem;
}
.content_android_a {
  text-align: center;
  position: relative;
}
.content_android_a p:nth-child(1) {
  color: rgba(0, 0, 0, 0.8);
  font-size: 2rem;
  font-weight: bold;
}
.content_android_a p:nth-child(2) {
  color: rgba(0, 0, 0, 0.45);
  font-size: 1rem;
  font-weight: 400;
}
.content_android_b {
  margin-top: 2.3rem;
  display: flex;
  margin-bottom: 1rem;
}
.content_android_b div:nth-child(1) {
  width: 12rem;
  /* height: 18rem; */
}
.content_android_b div:nth-child(1) img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}
.content_android_b div:nth-child(2) {
  width: 22.5rem;
  height: 12.3rem;
  padding: 2rem 1.4rem 2rem 1.4rem;

  background: rgba(55, 201, 172, 0.3);
}
/* .content_android_b div:nth-child(2) {
  width: 22.5rem;
  height: 18rem;
  margin: 2rem 1.4rem 2rem 1.4rem;
} */
.content_android_b div:nth-child(2) h1 {
  color: rgba(0, 0, 0, 0.8);
  font-weight: bold;
  font-size: 1.7rem;
}
.content_android_b div:nth-child(2) p {
  margin-top: 8px;
  overflow: hidden;
  width: 17.9rem;
  text-overflow: ellipsis;
  display: -webkit-box;
  /* 换行2段 */
  -webkit-line-clamp: 5;
  -webkit-box-orient: vertical;
  color: rgba(0, 0, 0, 0.8);
  font-size: 1.4rem;
}
.location_cioe_a {
  width: 1.75rem;
  height: 5rem;
  background: rgba(52, 217, 184, 0.1);
  position: absolute;
  top: -2rem;
  left: 16rem;
}
.location_cioe_b {
  position: absolute;
  top: -1rem;
  left: 17rem;
  width: 1.75rem;
  height: 5rem;
  background: rgba(255, 255, 255, 0.2);
}
.CHARACTERISTIC_b {
  margin-top: 2.3rem;
  display: flex;
  margin-bottom: 1rem;
}
.CHARACTERISTIC {
  display: flex;
  flex-wrap: wrap;
}
.content_android_CHARACTERISTIC {
  width: 17.2rem;
  height: 12.4rem;
  background-image: url("../../../../assets/images/u100.png");
  background-repeat: no-repeat;
  background-size: 100% 100%;
  opacity: 0.8;
  text-align: center;
}
.content_android_CHARACTERISTIC img {
  width: 5.6rem;
  height: 5.6rem;
  margin-top: 1.6rem;
}
.content_android_CHARACTERISTIC p:nth-child(2) {
  color: rgba(41, 147, 153, 1);
  font-size: 1.4rem;
  font-weight: bold;
}
.content_android_CHARACTERISTIC p:nth-child(3) {
  color: rgba(41, 147, 153, 1);
  font-size: 0.9rem;
  font-weight: 400;
}
.tab_news {
  margin-top: 2.4rem;
}
.tba_border {
  display: flex;
  justify-content: space-between;
  border-bottom: 1px solid rgba(0, 0, 0, 0.2);
}
.tba_border div {
  width: 8.6rem;
  color: rgba(0, 0, 0, 0.8);
  text-align: center;
  height: 3rem;
  font-size: 1.4rem;
  line-height: 3rem;
}
.tab_cufa {
  color: rgba(255, 255, 255, 1) !important;
  font-size: 1.5rem !important;
  font-weight: bold;
  background: rgba(247, 139, 15, 1);
}
.CheckinExperience {
  height: 4.4rem;
  font-weight: bold;
  font-size: 1.7rem;
  width: 37.5rem;
  text-align: center;
  color: rgba(255, 255, 255, 1);
  position: fixed;
  bottom: 3rem;
  line-height: 4.4rem;
  background: linear-gradient(90deg, #3ccfb2 0%, #4ac4cb 100%);
}
.tab_concent {
  margin-top: 1.2rem;
}
.tab_concent_top div:nth-child(1) {
  height: 22.8rem;
  width: 100%;
}
.tab_concent_top div:nth-child(1) img {
  height: 22.8rem;
  width: 100%;
}
.tab_concent_text {
  padding: 1.2em;
  height: 11rem;
  background: rgba(238, 238, 238, 1);
}
.tab_concent_text p:nth-child(1) {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  font-size: 1.4rem;
  overflow: hidden;
  line-height: 2.5rem;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.6);
  -webkit-box-orient: vertical;
}
.tab_concent_text p:nth-child(2) {
  margin-top: 0.8rem;
}
.tab_comcent_tow {
  margin-top: 1.6rem;
  display: flex;
  justify-content: space-between;
}
.tab_coent_tow_top {
  width: 16.4rem;
}
.tab_coent_tow_top img {
  height: 10.8rem;
  width: 100%;
}
.tab_coent_tow_text {
  background: rgba(238, 238, 238, 1);
  padding: 0.8rem 1.2rem 0.8rem 1.2rem;
}
.tab_coent_tow_text p:nth-child(1) {
  text-overflow: ellipsis;
  display: -webkit-box;
  -webkit-line-clamp: 3;
  font-size: 1.4rem;
  overflow: hidden;
  font-weight: 400;
  color: rgba(0, 0, 0, 0.8);
  -webkit-box-orient: vertical;
}
.tab_coent_tow_text p:nth-child(2) {
  margin-top: 0.4rem;
  color: rgba(0, 0, 0, 0.6);
  font-size: 1.2rem;
}
.seemore {
  font-size: 1.2rem;
  color: rgba(0, 0, 0, 0.65);
  text-align: center;
  margin-top: 2rem;
  margin-bottom: 4rem;
}
.CheckinExperience_form {
  width: 100%;
  height: 25.9rem;
  position: fixed;
  bottom: 7rem;
  -webkit-transition: all 0.6s;
  transition: all 0.6s;
}
.CheckinExperience_title {
  display: flex;
  justify-content: space-between;
  padding: 1.2rem;
  align-items: center;

  background: rgba(0, 0, 0, 0.95);
  color: rgba(255, 255, 255, 1);
}
.CheckinExperience_middle {
  /* width: 100%; */
  height: 21.4rem;
  /* padding: 1.6rem 1.5rem 1.6rem 1.5rem; */
  padding: 1.6rem 0.5rem 1.6rem 1.5rem;
  background: rgba(0, 0, 0, 0.85);
}
.CheckinExperience_button {
  width: 100%;
  height: 3.4rem;
  background: rgba(0, 0, 0, 0.95);
}
.butten {
  width: 7.2rem;
  background: rgba(52, 217, 184, 1);
  height: 3rem;
  font-weight: bold;
  font-size: 1.4rem;
  text-align: center;
  border-radius: 0.4rem;
  line-height: 3rem;
}
.search input {
  width: 16rem;
  height: 3.7rem !important;
  /* border-radius: 2px 2px 2px 2px; */
  opacity: 1;
  padding: 0 0rem 0 0.5rem;
  outline-color: #f78b0f;
}
.search select {
  /* outline: none;
  opacity: 1;
  width: 17rem;
  height: 4.1rem !important;
  padding: 0 0rem 0 0.5rem; */
  outline: none;
  opacity: 1;
  width: 17rem;
  height: 4.4rem !important;
  padding: 0 0rem 0 0.5rem;
  border: 0;
  margin-left: 1rem;
}
/* .search_mobile { */
/* margin-top: 1rem; */
/* } */
.search_mobile input {
  padding: 0 0rem 0 0.5rem;
  height: 3.7rem !important;
  width: 33.6rem;
  outline-color: #f78b0f;
  /* margin-top: 1rem; */
}
.search_top {
  display: flex;
  justify-content: space-between;
  /* margin-top: 1rem; */
}
.search_Verificationcode input {
  width: 23rem;
  padding: 0 0rem 0 0.5rem;
  height: 3.7rem !important;
  outline-color: #f78b0f;
  /* margin-top: 1rem; */
}
.search_Verificationcode {
  display: flex;
  justify-content: space-between;
  /* align-items: end; */
  /* margin-top: 1rem; */
}
.search_Verificationcode button {
  /* background: rgba(52, 217, 184, 1);
  width: 11rem;
  height: 4.1rem;
  border: 0;
  margin-left: -1rem;
  font-size: 1.4rem;
  font-weight: bold;
  color: #ffffff;
  outline: none; */
  background: rgba(52, 217, 184, 1);
  width: 15rem;
  height: 4rem;
  border: 0;
  margin-left: -1rem;
  font-size: 1.4rem;
  font-weight: bold;
  color: #ffffff;
  outline: none;
}
</style>
